'use client'

import React from 'react'
import { Button, Tooltip } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { useNavigation } from '@/hooks/useNavigation'

interface BackButtonProps {
    className?: string
    size?: 'small' | 'middle' | 'large'
    type?: 'default' | 'primary' | 'text' | 'link'
    showText?: boolean
    customText?: string
    tooltip?: string
    disabled?: boolean
    onClick?: () => void
}

export function BackButton({
    className,
    size = 'middle',
    type = 'text',
    showText = true,
    customText = '返回',
    tooltip = '返回上一页',
    disabled,
    onClick
}: BackButtonProps) {
    const { canGoBack, goBack } = useNavigation()

    const handleClick = () => {
        if (onClick) {
            onClick()
        } else {
            goBack()
        }
    }

    const isDisabled = disabled || (!canGoBack && typeof window !== 'undefined' && window.history.length <= 1)

    const buttonContent = (
        <Button
            type={type}
            size={size}
            icon={<ArrowLeftOutlined />}
            onClick={handleClick}
            disabled={isDisabled}
            className={`flex items-center ${className || ''}`}
        >
            {showText && customText}
        </Button>
    )

    return tooltip ? (
        <Tooltip title={tooltip}>
            {buttonContent}
        </Tooltip>
    ) : (
        buttonContent
    )
}